<!DOCTYPE html>
<html> 
<head> 
	<title>Blueprint</title> 
	<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<!--<script type='text/javascript' src='fullcalendar/jquery-ui-1.8.23.custom.min.js'></script>-->
	<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
	<script type='text/javascript' src='fullcalendar/fullcalendar.js'></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<style type='text/css'>
	a.fb-button {
	    color: #FFFFFF;
	    display: inline-block;
	    text-decoration: none;
	}

	.fb-button {
	    background: #5F78AB;
	    background-image: url('http://static.ak.fbcdn.net/rsrc.php/v2/yf/r/S-DbSHszr4D.png');  /*COPY TO YOUR OWN IMAGE STORE*/
	    background-repeat: no-repeat;
	    background-position: -1px -81px;
	    border-top: 1px solid #29447E;
	    border-right: 1px solid #29447E;
	    border-bottom: 1px solid #1A356E;
	    border-left: 1px solid #29447E;
	    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
	    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
	    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
	    cursor: pointer;
	    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	    font-size: 13px;
	    font-weight: bold;
	    height: 23px;
	    line-height: 23px;
	    padding: 0px 5px 0px 30px;
	    text-align: left;
	}
	</style>
</head> 
<body> 
		<div id="fb-root"></div>
	<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '478157508874436', // App ID
      channelUrl : 'http://bweebee.com/blueprint/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional init code here
    FB.getLoginStatus(function(response) {
	  if (response.status === 'connected') {
	    // connected
	    window.href.location="index.html";
	  } else if (response.status === 'not_authorized') {
	    // not_authorized
	    //$.mobile.changePage('#dialog', 'pop', true, true);
	  } else {
	    // not_logged_in
	    //$.mobile.changePage('#dialog', 'pop', true, true);
	  }
	 });
  	};

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

  function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            // connected
            testAPI();
            $('#dialog').dialog('close');
        } else {
            // cancelled
        }
    });
  }

  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
        console.log('Good to see you, ' + response.name + '.');
        window.location="index.html";
    });
	}
</script>

	<a class="fb-button" onClick="login();">Login with Facebook</a>
</body>
</html>